﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example11.aspx.cs" Inherits="Chapter40.Example11" %>

<!DOCTYPE html>

<html manifest="Example12.txt">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 40-11 直接使用应用程序缓存</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <style>
        img {
            border: medium double black;
            padding: 5px;
            margin: 5px;
            width: 100px;
            height: 100px;
        }

        div {
            margin: 10px;
        }

        table {
            margin: 10px;
            border-collapse: collapse;
        }

        th, td {
            padding: 2px;
        }

        body > * {
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <img id="target" src="images/bananas.jpg" alt="bananas" />
        <div>
            <button id="bananas">Bananas</button>
            <button id="apples">Apples</button>
            <button id="cherries">Cherries</button>
        </div>
        <div>
            <button id="update">Update</button>
            <button id="swap">Swap Cache</button>
        </div>
        The status is: <span id="status"></span>
    </div>
    <table id="event-table" border="1">
        <tr>
            <th>Event Type</th>
        </tr>
    </table>
    <br />
    <script>
        var buttons = document.getElementsByTagName('button');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = handleButtonPress;
        }

        function handleButtonPress(e) {
            switch (e.target.id) {
                case 'swap':
                    applicationCache.swapCache();
                    break;
                case 'update':
                    applicationCache.update();
                    checkStatus();
                    break;
                default:
                    document.getElementById('target').src = 'images/' + e.target.id + '.jpg';
            }
        }

        applicationCache.onchecking = handleEvent;
        applicationCache.onnoupdate = handleEvent;
        applicationCache.ondownloading = handleEvent;
        applicationCache.onupdateready = handleEvent;
        applicationCache.oncached = handleEvent;
        applicationCache.onobsolete = handleEvent;

        function handleEvent(e) {
            document.getElementById('event-table').innerHTML += '<tr><td>' + e.type + '</td></tr>';
            checkStatus();
        }

        function checkStatus() {
            var statusNames = ['UNCACHED', 'IDLE', 'CHECKING', 'DOWNLOADING', 'UPDATEREADY', 'OBSOLETE'];
            document.getElementById('status').innerHTML = statusNames[applicationCache.status];
        }
    </script>
</body>
</html>
